<template>
	<view class="my_app">
		<view class="company_info">
			<view class="info-box" @click="handlerJump('/company/BasicInfo?isReg=0',1)">
				<view class="info-img">
					<image v-if="companyinfo.logo"
						:src=" companyinfo.logo ? companyinfo.logo : imgUrl+'empty_logo.jpg'"></image>
					<image v-else src="@/static/img/com_empty_logo.jpg"></image>
				</view>
				<view class="info-text">
					<view class="info-t1" v-if="!toCompleteCompanyInfo">
						{{ companyinfo.companyname?companyinfo.companyname:"-" }}
					</view>
					<view class="info-t1" v-else>
						{{ userMobile }}
					</view>
					<view class="info-t2" v-if="!toCompleteCompanyInfo">
						{{ companyinfo.nature_text?(companyinfo.nature_text+'  ·  '):'' }}{{ companyinfo.scale_text?(companyinfo.scale_text+'  ·  '):'' }}{{ companyinfo.trade_text?companyinfo.trade_text:'' }}
					</view>
					<view class="info-t2" v-else>
						请完善企业信息
					</view>
				</view>
			</view>
			<view class="info-list">
				<view class="item" @click="handlerJump('/company/CompanyManagementIndex?navIndex=0',1)">
					<view class="num">
						{{ manage.job_apply.number }}
					</view>
					<view class="text">
						收到投递
					</view>
				</view>
				<view class="item" @click="handlerJump('/company/CompanyManagementIndex?navIndex=1',1)">
					<view class="num">
						{{ manage.down_resume.number }}
					</view>
					<view class="text">
						我的下载
					</view>
				</view>
				<view class="item" @click="handlerJump('/company/CompanyManagementIndex?navIndex=2',1)">
					<view class="num">
						{{ manage.interview.number }}
					</view>
					<view class="text">
						面试邀请
					</view>
				</view>
				<view class="item" @click="handlerJump('/company/CompanyManagementIndex?navIndex=3',1)">
					<view class="num">
						{{ manage.fav.number }}
					</view>
					<view class="text">
						我的收藏
					</view>
				</view>
			</view>
			<view class="membres-box">
				<view class="membres-t1" v-if="!toCompleteCompanyInfo">
					{{ setmeal.name }}
				</view>
				<view class="membres-t1" v-else>
					完善企业信息后可查看
				</view>
				<view class="membres-t2">
					升级套餐，立享更多特权
				</view>
				<view class="membres-btn" @click="handleTips">
					去升级
				</view>
			</view>
		</view>
		<view class="box_4">
			<view class="item" @click="handlerJobadd">
				<view class="ico ic1"></view>
				<view class="txt">发布职位</view>
			</view>
			<view class="item" @click="refreshJoblist()">
				<view class="ico ic2"></view>
				<view class="txt">一键刷新</view>
			</view>
			<view class="item" @click="handlerJump('/company/JobList',1)">
				<view class="ico ic3"></view>
				<view class="txt">职位管理</view>
			</view>
			<view class="item" @click="handlerClick('/views/ResumeList')">
				<view class="ico ic4"></view>
				<view class="txt">人才搜索</view>
			</view>
		</view>
		<view class="form_split_10"></view>
		<view class="box_2" v-if="companyinfo.company_audit == 0" @click="handlerJump('/company/AccountManage/Auth',0)">
			认证后的企业更容易获得求职者信任，招聘更快速！
			<view class="right_txt">去认证</view>
		</view>
		<view class="box_title no" v-if="setmeal">
			<view>
				会员服务
			</view>
			<view class="right_txt">
				<text class="after_txt" v-if="setmeal.deadline == 0">(无限期)</text>
				<text class="after_txt" v-else>
					({{ setmeal.deadline | timeFilter }}到期)
				</text>
			</view>
		</view>
		<view class="box_6">
			<view class="item" @click="handlerJump('/company/Service/Points',1)">
				<view class="ico ic1"></view>
				<view class="txt">我的{{ points_byname }}</view>
			</view>
			<!-- #ifdef MP-TOUTIAO -->
			<view class="item" @click="payWarn()">
				<view class="ico ic2"></view>
				<view class="txt">增值服务</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="item" @click="handlerJump('/service/company/toolShop',1)">
				<view class="ico ic2"></view>
				<view class="txt">增值服务</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-TOUTIAO || MP-WEIXIN -->
			<view class="item" @click="handlerJump('/company/Service/MySetmeal',1)">
				<view class="ico ic3"></view>
				<view class="txt">我的套餐</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<view class="item" @click="handleTips()">
				<view class="ico ic3"></view>
				<view class="txt">我的套餐</view>
			</view>
			<!-- #endif -->
			<view class="item" @click="handlerJump('/company/Service/Coupon',1)">
				<view class="ico ic4"></view>
				<view class="txt">优惠券</view>
			</view>
			<!-- #ifdef MP-TOUTIAO || MP-WEIXIN -->
			<view class="item" @click="handlerJump('/commonViews/service/OrderList',1)">
				<view class="ico ic5"></view>
				<view class="txt">我的订单</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<view class="item" @click="handleTips()">
				<view class="ico ic5"></view>
				<view class="txt">我的订单</view>
			</view>
			<!-- #endif -->
		</view>
		<view class="box_7">
			<view class="btn" @click="handlerJump('/company/Service/MySetmeal',1)">
				<view class="btn_content">了解我的招聘特权</view>
			</view>
		</view>
		<view class="form_split_10"></view>
		<view class="box_9">
			<view class="handle_line l1" @click="handlerJump('/company/CompanyManagement',1)">
				企业管理
			</view>
			<view class="handle_line l6" @click="handlerJump('/company/Recommend',1)">
				智能匹配
				<view class="tip_go"></view>
			</view>
			<view class="handle_line l3" @click="handlerJump('/company/AccountManage/ExclusiveService',1)">
				专属客服
			</view>
			<view class="handle_line l5 " @click="showSwitchType = true">
				<view>
					我要求职
				</view>
			</view>
			<view class="handle_line l4" @click="exitAccout=true">
				退出登录
			</view>
		</view>
		<BottomNav></BottomNav>
		<view :class="showSwitchType ? 'login-popup login-popup-ac' : 'login-popup' ">
			<SwitchType @closeSwitchType="showSwitchType = false" :target_utype="2"></SwitchType>
		</view>
		<u-modal v-model="showWeixinQrcode" title="认证" confirm-text="知道了">
			<view class="dialog_wx_qr">
				<view class="tip orange">截屏保存二维码图片，关注公众号</view>
				<view class="qr_img">
					<image :src="wechat_qrcode"></image>
				</view>
				<view class="tip_text">使用“扫一扫”打开图片，识别关注公众号完成绑定操作。绑定后即可随时随地接收最新消息通知。</view>
			</view>
		</u-modal>
		<u-top-tips ref="uTips"></u-top-tips>
		<u-toast ref="uToast" />
		<CustomerModal ref="CustomerModal"></CustomerModal>
		<!-- 一键刷新 -->
		<u-modal v-model="refreshModal" :show-cancel-button="true" title="系统提示" content="确定刷新所有发布中的职位吗"
			@confirm="handlerRefreshBatch"></u-modal>
		<u-modal v-model="refreshModal2" :show-cancel-button="true" title="系统提示" :content="refreshTipsText"
			@confirm="handlerClick('/company/JobList')"></u-modal>
		<!-- 退出账号提示 -->
		<u-modal v-model="exitAccout" title="提示" content="确认退出账号吗？" show-cancel-button @confirm="logout"
			@cancel="exitAccout=false"></u-modal>
		<!-- 企业认证提示框 -->
		<u-modal v-model="isAuthentication" @confirm="jumpAuthentication" confirm-text="去完善" :show-cancel-button="true"
			title="系统提示" content="根据相关法律法规要求，需要您完善企业认证信息"></u-modal>
	</view>
</template>

<script>
	import SwitchType from '@/components/account/SwitchType'
	import handlerHttpError from '@/utils/error'
	import {
		parseTime
	} from '@/utils/index'
	import http from '@/utils/http'
	import api from '@/api'
	import Ad from '@/components/Ad'
	import {
		mapState
	} from 'vuex'
	import CustomerModal from "@/components/CustomerModal.vue"
	export default {
		name: 'CompanyIndex',
		components: {
			SwitchType,
			Ad,
			CustomerModal
		},
		filters: {
			timeFilter(timestamp) {
				return timestamp ? parseTime(timestamp, '{y}-{m}-{d}') : ''
			}
		},
		data() {
			return {
				isAuthentication: false,
				imgUrl: getApp().globalData.imgUlr,
				exitAccout: false,
				refreshModal: false,
				refreshTipsText: '',
				refreshModal2: false,
				pullLoading: false,
				top_loading: true,
				addJobText: '',
				companyinfo: {},
				manage: {
					job_apply: {
						red_point: 0,
						number: 0
					},
					down_resume: {
						red_point: 0,
						number: 0
					},
					interview: {
						red_point: 0,
						number: 0
					},
					fav: {
						red_point: 0,
						number: 0
					},
					view: {
						red_point: 0,
						number: 0
					}
				},
				setmeal: {},
				showSwitchType: false,
				message_list: [],
				animateUp: false,
				timer: null,
				ad_dataset_banner: {
					alias: 'QS_member_company_banner',
					items: []
				},
				empty_info: false,
				showWeixinQrcode: false,
				customerInfo: {},
				toCompleteCompanyInfo: false
			}
		},
		created() {

		},
		mounted() {
			this.timer = setInterval(this.scrollAnimate, 3000)
		},
		destroyed() {
			clearInterval(this.timer)
		},
		onPullDownRefresh() {
			this.fetchData(true)
		},
		onShow() {
			this.toCompleteCompanyInfo = uni.getStorageSync('toCompleteCompanyInfo')
			this.fetchData()
			if (this.LoginOrNot && !this.toCompleteCompanyInfo) {
				this.customerData()
			}
		},
		computed: {
			...mapState({
				points_byname: state => state.config.points_byname,
				wechat_qrcode: state => state.config.wechat_qrcode,
				LoginOrNot: state => state.LoginOrNot,
				userMobile: state => state.userMobile
			})
		},
		methods: {
			payWarn() {
				// 抖音小程序没有支付功能
				this.$refs.CustomerModal.getCustomer()
			},
			handleMakeCall() {
				uni.makePhoneCall({
					phoneNumber: this.customerInfo.mobile, //仅为示例
					complete: function(res) {}
				});
			},
			customerData() {
				var that = this
				uni.request({
					method: 'get',
					url: getApp().globalData.baseURL + api.customer_service,
					data: {},
					header: {
						'user-token': this.$store.state.userToken,
						'platform': this.$store.state.platform
					},
					success(res) {
						if (res.data.code == 200) {
							that.customerInfo = {
								...res.data.data.info
							}
						}
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			handleTips() {
				// #ifdef MP-ALIPAY
				this.$nextTick(() => {
					this.$refs.CustomerModal.getCustomer()
				})
				// #endif
				// #ifdef MP-TOUTIAO || MP-WEIXIN
				if (this.toCompleteCompanyInfo) {
					this.toAddComInfoForm()
				} else {
					uni.navigateTo({
						url: '/company/Service/MySetmeal'
					})
				}
				// #endif
			},
			handlerBindWeixin() {
				if (this.companyinfo.bind_weixin === 1) {
					this.$dialog
						.confirm({
							title: '系统提示',
							message: '解绑后无法使用快速登录网站，是否确定解绑？'
						})
						.then(() => {
							http
								.post(api.unbind, {
									type: 'weixin'
								})
								.then(() => {
									this.fetchData()
									this.$refs.uTips.show({
										title: '解绑成功',
										type: 'success'
									})
								})
								.catch(() => {})
						})
						.catch(() => {
							// on cancel
						})
				} else {
					this.showWeixinQrcode = true
				}
			},
			handlerClick(path) {
				if (this.toCompleteCompanyInfo) {
					this.toAddComInfoForm()
				} else {
					uni.navigateTo({
						url: path
					})
				}
			},
			toAddComInfoForm() {
				uni.showModal({
					title: '系统提示',
					content: '您当前暂未完善企业信息，建议您先去完善企业信息',
					confirmColor: '#146BF9',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/company/BasicInfo'
							})
						}
					}
				});
			},
			refreshJoblist() {
				if (this.empty_info === true || this.toCompleteCompanyInfo) {
					// 完善企业信息
					this.toAddComInfoForm()
				} else {
					this.refreshModal = true
				}
			},
			handlerJump(path, checkAuth) {
				if (this.empty_info === true || this.toCompleteCompanyInfo) {
					// 完善企业信息
					this.toAddComInfoForm()
				} else {
					if (checkAuth === 1 && this.companyinfo.company_audit !== 1 && this.companyinfo.need_audit === 1) {
						handlerHttpError({
							code: 50004,
							message: '请先通过企业认证'
						})
					} else {
						uni.navigateTo({
							url: path
						})
					}
				}
			},
			// 公告滚动
			scrollAnimate() {
				this.animateUp = true
				setTimeout(() => {
					this.message_list.push(this.message_list[0])
					this.message_list.shift()
					this.animateUp = false
				}, 500)
			},
			handlerPullRefresh() {
				this.top_loading = true
				this.fetchData(true)
			},
			fetchAd() {
				http
					.post(api.ad_list, {
						alias: ['QS_member_company_banner@mobile']
					})
					.then(res => {
						this.ad_dataset_banner.items =
							res.data.data.items['QS_member_company_banner@mobile']
					})
					.catch(() => {})
			},
			fetchData(is_refresh = false) {
				uni.showLoading({
					title:'加载中'
				})
				http
					.post(api.company_index, {})
					.then(res => {
						const {
							companyinfo,
							manage,
							setmeal,
							message_list
						} = {
							...res.data.data
						}
						this.companyinfo = companyinfo
						this.manage = manage
						this.setmeal = setmeal
						this.message_list = message_list
						this.top_loading = false
						this.pullLoading = false
						uni.hideLoading()
						uni.stopPullDownRefresh()
						if (is_refresh) {
							this.$refs.uToast.show({
								title: '页面刷新成功',
								type: 'default'
							})
						}
						if (companyinfo.district1 == 0) {
							this.empty_info = true
						} else {
							this.empty_info = false
						}
						if (companyinfo.notice_auth_complete == 1) {
							this.isAuthentication = true
						}
					})
					.catch(() => {})
			},
			jumpAuthentication() {
				uni.navigateTo({
					url: '/company/AccountManage/Auth'
				})
			},
			handlerJobadd() {
				if (this.toCompleteCompanyInfo) {
					this.toAddComInfoForm()
				} else {
					http
						.get(api.company_check_jobadd_num, {})
						.then(res => {
							if (res.data.data.enable_addjob_num <= 0) {
								let addJobText = '您当前是' + res.data.data.setmeal_name +
									'，当前可发布职位数为0，建议您立即升级套餐或将暂时不招聘的职位设为关闭！'
								this.addJobText = addJobText
								console.log(this.addJobText, 'this.addJobText')
								uni.showModal({
									title: '提示',
									content: addJobText,
									showCancel: true,
									cancelText: '取消',
									cancelColor: '#999999',
									confirmText: '升级套餐',
									confirmColor: '#2979ff',
									success: (res) => {
										if (res.confirm) {
											// 用户点击了确定按钮
											uni.navigateTo({
												url: '/company/Service/MySetmeal'
											})
										}
									},
								});
								// this.$nextTick(() => {
								// 	this.$refs.CustomerModal.getCustomer()
								// })
								return false
							} else {
								uni.navigateTo({
									url: '/company/AddJob'
								})
							}
						})
						.catch(() => {})
				}

			},
			handlerRefreshBatch() {
				http
					.post(api.company_job_refresh_batch, {})
					.then(res => {
						if (res.data.data.done === 0) {
							this.refreshTipsText = res.data.message
							this.refreshModal2 = true
							return false
						} else {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'success'
							})
						}
					})
					.catch(() => {})
			},
			logout() {
				uni.removeStorageSync('loginInfo');
				this.$store.commit('setLoginState', {
					whether: false,
					utype: 0,
					token: '',
					mobile: '',
					userIminfo: {}
				})
				uni.redirectTo({
					url: '/views/Index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-popup {
		position: fixed;
		right: -100vw;
		top: 0;
		z-index: 19999;
		width: 100vw;
		height: 100vh;
		transition: all .3s;
		background: #FFFFFF;

		&.login-popup-ac {
			right: 0;
		}
	}

	.u-popup--center {
		background: transparent;
	}

	.handle_line {
		&.l7 {
			background-image: url($ImgUrl + "company_index_l7.png");
			background-color: #ffffff;
			background-repeat: no-repeat;
			background-position: 40rpx center;
			background-size: 36rpx 36rpx;
		}

		&.l6 {
			background-image: url($ImgUrl + "company_index_l6.png");
			background-color: #ffffff;
			background-repeat: no-repeat;
			background-position: 46rpx center;
			background-size: 20rpx 32rpx;
		}

		&.l5 {
			background-image: url($ImgUrl + "company_index_l5.png");
			background-color: #ffffff;
			background-repeat: no-repeat;
			background-position: 40rpx center;
			background-size: 36rpx;
		}

		&.l4 {
			background-image: url("../static/img/company_index_l8.png");
			background-color: #ffffff;
			background-repeat: no-repeat;
			background-position: 40rpx center;
			background-size: 36rpx;
		}

		&.l3 {
			background-image: url($ImgUrl + "company_index_l3.png");
			background-color: #ffffff;
			background-repeat: no-repeat;
			background-position: 40rpx center;
			background-size: 40rpx 37rpx;
		}

		&.l2 {
			background-image: url($ImgUrl + "company_index_l2.png");
			background-color: #ffffff;
			background-repeat: no-repeat;
			background-position: 40rpx center;
			background-size: 35rpx;
		}

		&.l1 {
			background-image: url($ImgUrl + "company_index_l1.png");
			background-color: #ffffff;
			background-repeat: no-repeat;
			background-position: 40rpx center;
			background-size: 36rpx 37rpx;
		}

		font-size: 32rpx;
		color: #333333;
		padding: 33rpx 0 33rpx 104rpx;
		position: relative;

		.tip_go {
			position: absolute;
			left: 248rpx;
			top: 50%;
			transform: translate(0, -50%);
			width: 43rpx;
			height: 28rpx;
			background-image: url($ImgUrl + "personal_index_app_go.png");
			background-position: 0;
			background-repeat: no-repeat;
			background-size: 43rpx 28rpx;
		}

		.right_txt {
			position: absolute;
			right: 68rpx;
			top: 50%;
			transform: translate(0, -50%);
			font-size: 28rpx;
			color: #c9c9c9;
		}

		&::before {
			content: " ";
			position: absolute;
			right: 24rpx;
			top: 50%;
			transform: translate(0, -50%);
			width: 32rpx;
			height: 32rpx;
			background-image: url(static/img/form_choose_arrow.png);
			background-repeat: no-repeat;
			background-position: 0;
			background-size: 32rpx;
		}

		&:not(:last-child)::after {
			content: " ";
			position: absolute;
			pointer-events: none;
			right: 0;
			bottom: 0;
			left: 104rpx;
			border-bottom: 2rpx solid #f3f3f3;
		}
	}

	.box_9 {
		width: 100%;
		background-color: #ffffff;
		/* #ifdef MP-ALIPAY */
		padding-bottom: 200rpx;
		/* #endif */

		&.no_mb {
			margin-bottom: 0;
		}
	}

	.box_7 {
		.btn {
			.btn_content {
				font-size: 24rpx;
				color: #ff813c;
				padding: 23rpx 0 23rpx 40rpx;
				background-image: url($ImgUrl + "company_index_box7_ic1.png");
				background-repeat: no-repeat;
				background-position: 40rpx center;
				background-size: 24rpx 23rpx;
				width: 300rpx;
				margin: 0 auto;
			}

			width: 680rpx;
			margin: 0 auto;
			background-color: #fff6f0;
			text-align: center;
			border-radius: 70rpx;
		}

		width: 100%;
		background-color: #ffffff;
		padding-bottom: 50rpx;
	}

	.box_6 {
		display: flex;
		width: 100%;
		background-color: #ffffff;
		padding: 10rpx 0 40rpx;

		.item {
			.txt {
				padding-top: 9rpx;
				font-size: 24rpx;
				color: #333333;
			}

			.ico {
				&.ic5 {
					background-image: url($ImgUrl + "company_index_box6_ic5.png");
					background-position: center 0;
					background-repeat: no-repeat;
					background-size: 41rpx;
				}

				&.ic4 {
					background-image: url($ImgUrl + "company_index_box6_ic4.png");
					background-position: center 3rpx;
					background-repeat: no-repeat;
					background-size: 44rpx 35rpx;
				}

				&.ic3 {
					background-image: url($ImgUrl + "company_index_box6_ic3.png");
					background-position: center 2rpx;
					background-repeat: no-repeat;
					background-size: 45rpx 38rpx;
				}

				&.ic2 {
					background-image: url($ImgUrl + "company_index_box6_ic2.png");
					background-position: center 2rpx;
					background-repeat: no-repeat;
					background-size: 40rpx;
				}

				&.ic1 {
					background-image: url($ImgUrl + "company_index_box6_ic1.png");
					background-position: center 0;
					background-repeat: no-repeat;
					background-size: 44rpx 41rpx;
				}

				display: inline-block;
				width: 45rpx;
				height: 41rpx;
			}

			flex: 1;
			text-align: center;
		}
	}

	.box_5 {
		.item {
			.txt {
				padding-top: 25rpx;
				font-size: 24rpx;
				color: #999999;
			}

			.num {
				&.new::after {
					content: " ";
					position: absolute;
					right: -18rpx;
					top: -6rpx;
					width: 12rpx;
					height: 12rpx;
					border-radius: 100%;
					background-color: #ff5700;
				}

				position: relative;
				font-size: 36rpx;
				color: #333333;
				max-width: 72rpx;
				margin: 0 auto;
			}

			flex: 1;
			text-align: center;
		}

		display: flex;
		background-color: #ffffff;
		padding: 10rpx 0 30rpx;
		border-bottom: 2rpx solid #f5f5f5;
	}

	.box_title {
		.after_txt {
			font-size: 24rpx;
			color: #999999;
		}

		width: 100%;
		background-color: #ffffff;
		position: relative;
		padding: 35rpx 0 35rpx 36rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;

		&::after {
			position: absolute;
			right: 32rpx;
			top: 54rpx;
			width: 12rpx;
			height: 12rpx;
			border-top: 2rpx solid #1787fb;
			border-right: 2rpx solid #1787fb;
			transform: rotate(45deg);
			content: " ";
		}

		&.no::after {
			display: none;
		}

		.right_txt {
			.for_link {
				color: #1787fb;
			}

			position: absolute;
			right: 45rpx;
			top: 50%;
			transform: translate(0, -50%);
			font-size: 24rpx;
			color: #999999;
		}
	}

	.box_4 {
		display: flex;
		width: 100%;
		background-color: #ffffff;
		padding: 35rpx 0;

		.item {
			.txt {
				font-size: 24rpx;
				color: #292b32;
			}

			.ico {
				// &.ic6 {
				// 	background-image: url($ImgUrl + "shortvideo/icon_shortvideo.png");
				// 	background-position: center 0;
				// 	background-repeat: no-repeat;
				// 	background-size: 80rpx;
				// }

				&.ic4 {
					background-image: url($ImgUrl + "company_index_box4_ic4.png");
					background-position: 0;
					background-repeat: no-repeat;
					background-size: 80rpx;
				}

				&.ic3 {
					background-image: url($ImgUrl + "company_index_box4_ic3.png");
					background-position: 0;
					background-repeat: no-repeat;
					background-size: 80rpx;
				}

				&.ic2 {
					background-image: url($ImgUrl + "company_index_box4_ic2.png");
					background-repeat: no-repeat;
					background-position: 0;
					background-size: 80rpx;
				}

				&.ic1 {
					background-image: url($ImgUrl + "company_index_box4_ic1.png");
					background-repeat: no-repeat;
					background-position: 0;
					background-size: 80rpx;
				}

				display: inline-block;
				width: 80rpx;
				height: 80rpx;
			}

			flex: 1;
			text-align: center;
		}
	}

	.company_info {
		width: 100%;
		height: 414rpx;
		// background:#0c78fc;
		background-image: url(../static/img/com-bg.jpg);
		background-position: top center;
		background-repeat: no-repeat;
		background-size: 750rpx 414rpx;
		padding: 50rpx 40rpx 0;
		color: #fff;

		.info-box {
			display: flex;
			margin-bottom: 40rpx;

			.info-img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 10rpx;
				flex-shrink: 0;
				margin-right: 30rpx;
				border-radius: 8rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
				}
			}

			.info-text {
				max-width: 550rpx;

				.info-t1 {
					font-size: 36rpx;
					line-height: 55rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-weight: bold;
				}

				.info-t2 {
					font-size: 24rpx;
					line-height: 45rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}

		.info-list {
			display: flex;
			padding: 18rpx 0 30rpx;

			.item {
				flex: 1;
				color: #fff;
				text-align: center;

				.num {
					font-size: 38rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
				}

				.text {
					font-size: 24rpx;
				}
			}
		}

		.membres-box {
			display: flex;
			height: 85rpx;
			border-radius: 20rpx 20rpx 0 0;
			align-items: center;
			padding: 0 25rpx;
			background-image: url(../static/img/com-bg3.png);
			background-position: top center;
			background-repeat: no-repeat;

			.membres-t1 {
				width: 230rpx;
				color: #845b1d;
				font-size: 28rpx;
				margin-right: 20rpx;
				font-weight: bold;
				padding-left: 50rpx;
				background: url(../static/img/com-bg2.png);
				background-position: center left;
				background-repeat: no-repeat;
				background-size: 39rpx 36rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-weight: 500;
			}

			.membres-t2 {
				width: 270rpx;
				color: #845b1d;
				font-size: 24rpx;
				margin-right: 6rpx;
			}

			.membres-btn {
				border-radius: 30rpx;
				width: 100rpx;
				height: 40rpx;
				font-size: 22rpx;
				color: #ffffff;
				text-align: center;
				line-height: 40rpx;
				background: #ae6d18;
			}
		}
	}

	.box_3 {
		width: 100%;
		background-color: #ffffff;
		position: relative;
		padding-left: 150rpx;
		height: 100rpx;
		overflow: hidden;

		&::after {
			position: absolute;
			right: 34rpx;
			top: 41rpx;
			width: 14rpx;
			height: 14rpx;
			border-top: 2rpx solid #999999;
			border-right: 2rpx solid #999999;
			transform: rotate(45deg);
			content: " ";
		}

		.title {
			position: absolute;
			left: 32rpx;
			top: 50%;
			transform: translate(0, -50%);
			font-size: 22rpx;
			color: #ff6600;
			padding: 4rpx 20rpx;
			background-color: #fff5e8;
			border: 2rpx solid #ffaf6e;
			border-radius: 42rpx;
		}

		li {
			font-size: 26rpx;
			color: #333333;
			padding: 27rpx 44rpx 27rpx 0;
			width: 580rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.animate-up {
			transition: all 0.5s ease-in-out;
			transform: translateY(-100rpx);
		}
	}

	.box_2 {
		width: 100%;
		font-size: 24rpx;
		color: #ff6600;
		position: relative;
		padding: 22rpx 0 22rpx 66rpx;
		background-image: $remind_ico;
		background-color: #fffbeb;
		background-position: 26rpx center;
		background-repeat: no-repeat;
		background-size: 30rpx;

		.right_txt {
			position: absolute;
			right: 0;
			top: 50%;
			transform: translate(0, -50%);
			font-size: 24rpx;
			color: #1787fb;
			padding: 26rpx 34rpx;
		}
	}

	.my_app {
		// background-image: url($ImgUrl + "company_index_top_bg.png");
		background-color: #ffffff;
		background-position: center 0;
		background-repeat: no-repeat;
		background-size: 750rpx 296rpx;
	}

	.ptop {
		padding-top: 100rpx;
	}

	.addJobTips {
		text-align: center;
		padding: 35rpx 25rpx;
		font-size: 30rpx;
		color: #606266;
		padding-top: 240rpx;
		background: url(../static/img/customer-dialog.png);
		background-size: 100% 152rpx;
		background-position: top center;
		background-repeat: no-repeat;

		.text1,
		.text2 {
			color: #1b1a1a;
			font-size: 36rpx;
		}

		.text2 {
			margin-bottom: 50rpx;
			margin-top: 20rpx;
		}

		.text3 {
			font-size: 46rpx;
			color: #ff6600;
			margin-bottom: 30rpx;
		}

		.text4 {
			color: #999999;
			font-size: 28rpx;
		}
	}
</style>